<template>
	<uni-popup ref="popupDialog">
		<view class="popup-bd">
			<view class="popup-title">
				响应情况
				<uni-icons
					type="closeempty"
					size="50rpx"
					color="#666666"
					class="popup-close"
					@click="complete"
				></uni-icons>
			</view>
			<view class="popup-content">
				<view class="content-wrapper">
					<view class="agree">
						<text>已接受 {{ data.agreeList.length }} 人:</text>
						<view class="agreeList">{{
							getUserName(data.agreeList)
						}}</view>
					</view>
					<view class="refuse">
						<text>已拒绝 {{ data.refuseList.length }} 人:</text>
						<view class="refuseList">
							<view
								class="refuseItem"
								v-for="item in data.refuseList"
								v-bind:key="item.id"
							>
								<text>{{ getName(item.userId) }}</text>
								<view class="refuseDetail">
									<view
										class="audioList"
										v-if="item.voices && item.voices.length"
									>
										<diy-audio
											:width="200"
											v-for="(
												audio, index
											) in item.voices"
											v-bind:key="index"
											:voiceText="audio.text"
											:file="audio.url"
											:audioTime="audio.duration || 1"
										></diy-audio>
									</view>
									{{ item.refuseDesc || '拒绝' }}
								</view>
								<view class="refuseDate">{{
									formatDate(item.gmtModified)
								}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-footer" @click="complete">知道了</view>
		</view>
	</uni-popup>
</template>
<script>
const dayjs = require('@/common/dayjs.min.js')
import { handleFormatDayjs } from '@/common/date'
import diyAudio from '@/subPackagesLog/components/diy-audio/diy-audio.vue'

export default {
	data() {
		return {
			data: {
				agreeList: [],
				refuseList: [],
			},
			userData: [],
		}
	},
	components: {
		diyAudio,
	},
	methods: {
		open(d, userData) {
			this.$refs.popupDialog.open()
			this.data = d
			this.userData = userData
			console.log(77777)
			console.log(this.data)
		},
		getUserName(userList) {
			const names = userList.map((user) => {
				return this.getName(user.userId)
			})
			return names.filter((n) => n).join('、')
		},
		getName(id) {
			return this.userData.filter((u) => u.id === id)[0]?.name
		},
		complete() {
			this.$refs.popupDialog.close()
		},
		formatDate(timestamp) {
			return handleFormatDayjs(dayjs(timestamp), 'M/D HH:mm:ss')
		},
	},
}
</script>
<style lang="scss" scoped>
.popup-bd {
	width: 90vw;
	border-radius: 50rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: auto;
	max-height: calc(100vh - 100rpx);

	.popup-content {
		height: auto;
		max-height: calc(100vh - 100rpx - 260rpx);
	}

	.content-wrapper {
		padding: 10rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		.agree {
			text {
				width: 220rpx;
				color: $primary-sec-color;
			}
		}
		.refuse {
			text {
				width: 220rpx;
				color: $danger-color;
			}
			.refuseList {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				padding-top: 10rpx;
				padding-left: 40rpx;
				.refuseItem {
					display: flex;
					justify-content: space-between;
					text {
						width: 100rpx;
					}
					.refuseDetail {
						flex: 1;
						font-size: 28rpx;
						display: flex;
						flex-direction: column;
						gap: 10rpx;
						max-width: 260rpx;
						.audioList {
							display: flex;
							flex-direction: column;
							gap: 10rpx;
							margin-bottom: 10rpx;
							/deep/ .audio-bg {
								width: 100%;
							}
						}
					}
					.refuseDate {
						width: 190rpx;
						color: #999999;
						font-size: 28rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.content-footer {
		flex: 1;
		font-size: 36rpx;
		line-height: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $primary-sec-color;
		border-top: 2rpx solid $border-color;
	}
}
</style>
